<template>
  <Layer :layer="layer" @confirm="submit" ref="layerDom" v-if="isShow">
    <el-form
      :model="form"
      :rules="rules"
      ref="ruleForm"
      label-width="120px"
      style="margin-right: 30px"
    >
      <table class="table01">
        <tr>
          <td>风险分布图名称</td>
          <td>
            <el-input v-model="form.Riskname" class="ipt"></el-input>
          </td>
          <td>风险分布图</td>
          <td><el-link type="primary" @click="toggleFn">替换</el-link></td>
        </tr>
        <tr>
          <td>创建人</td>
          <td>
            <el-input v-model="form.name" class="ipt"></el-input>
          </td>
          <td>风险区域</td>
          <td>
            <el-input v-model="form.eare" class="ipt"></el-input>
          </td>
        </tr>
      </table>
      <div style="margin-top: 20px; text-align: center">
        <img :src="form.image" alt="" style="width: 80%" />
      </div>
    </el-form>
   
    <!-- <el-upload
      v-else
      class="upload-demo"
      style="margin-left: 100px"
      drag
      action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
      multiple
    >
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text">
        Drop file here or <em>click to upload</em>
      </div>
      <template #tip>
        <div class="el-upload__tip">
          jpg/png files with a size less than 500kb
        </div>
      </template>
    </el-upload> -->
  </Layer>
  <Cropper :layer="layerimg" v-model="img" v-else/>
</template>

<script lang="ts">
import { UploadFilled } from '@element-plus/icons-vue'
import type { LayerType } from '@/components/layer/index.vue'
import type { Ref } from 'vue'
import Cropper from '@/components/cropper/index.vue'
import type { ElFormItemContext } from 'element-plus/lib/el-form/src/token'
import { defineComponent, ref,reactive,watch } from 'vue'
import { add, update } from '@/api/table'
import { selectData, radioData } from './enum'
import Layer from '@/components/layer/index.vue'
export default defineComponent({
  components: {
    Layer,
    Cropper,
  },
  props: {
    layer: {
      type: Object,
      default: () => {
        return {
          show: false,
          title: '',
          showButton: true,
        }
      },
    },
  },
  setup(props, ctx) {
    const ruleForm: Ref<ElFormItemContext | null> = ref(null)
    const layerDom: Ref<LayerType | null> = ref(null)
      let img = ref('http://blog.51weblove.com/wp-content/uploads/2019/03/2019032400535358.jpg')
    const layerimg = reactive({
      show: false,
      title: '图片上传'
    })
    let isShow = ref(true)
    let form = ref({
      name: '',
      Riskname: '',
      eare: '',
      image: '',
    })
    const rules = {
      name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
      Riskname: [
        { required: true, message: '请输入风险地区', trigger: 'blur' },
      ],
      eare: [{ required: true, message: '请输入地区', trigger: 'blur' }],
      image: [{ required: true, message: '请上次图片', trigger: 'blur' }],
    }
    init()
    function init() {
      // 用于判断新增还是编辑功能
      if (props.layer.row) {
        form.value = JSON.parse(JSON.stringify(props.layer.row)) // 数量量少的直接使用这个转
      } else {
      }
    }
    function toggleFn() {
      layerimg.show = !layerimg.show
      isShow.value = !isShow.value
       layerDom.value.isShow=!layerDom.value.isShow
    }
    watch(img,(val)=>{
      isShow.value=!isShow.value
      form.value.image=val
    })
    return {
      img,
      layerimg,
      form,
      rules,
      isShow,
      layerDom,
      ruleForm,
      selectData,
      radioData,
      toggleFn,
    }
  },
  methods: {
    submit() {
      if(!this.isShow){
        this.isShow=!this.isShow
      }
      if (this.ruleForm) {
        this.ruleForm.validate((valid: any) => {
          if (valid) {
            let params = this.form
            if (this.layer.row) {
              this.updateForm(params)
            } else {
              this.addForm(params)
            }
          } else {
            return false
          }
        })
      }
    },
    // 新增提交事件
    addForm(params: object) {
      add(params).then((res) => {
        this.$message({
          type: 'success',
          message: '新增成功',
        })
        this.$emit('getTableData', true)
        this.layerDom && this.layerDom.close()
      })
    },
    // 编辑提交事件
    updateForm(params: object) {
      update(params).then((res) => {
        this.$message({
          type: 'success',
          message: '编辑成功',
        })
        this.$emit('getTableData', false)
        this.layerDom && this.layerDom.close()
      })
    },
  },
})
</script>

<style lang="scss" scoped>
.table01 {
  width: 100%;
  height: 100px;
  border: 1px solid black;
  border-collapse: collapse;
}
td {
  border: 1px solid #999;
  text-align: center;
  padding: 20px 0;
  width: 25%;
}

/* 利用穿透，设置input边框隐藏 */
.ipt::v-deep(.el-input__inner) {
  box-shadow: 0 0 0 1px #fff inset;
  font-size: 14px;
  text-align: center;
}
::v-deep(.el-input .el-input--small .el-input__inner:focus) {
  box-shadow: none !important;
}
</style>
